<!--
 * @Description: 权限管理
 * @Author: fxg
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-26 16:28:03
-->
<template>
  <div class="pages_content permissions">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <el-container>
          <el-header>
            <el-button-group>
              <el-button :class="currrenIndex == 1 ? 'active' : 'botton_top'" @click="choosecurrrenIndex(1)">权限配置</el-button>
              <el-button :class="currrenIndex == 2 ? 'active' : 'botton_top'" @click="choosecurrrenIndex(2)">权限快捷配置</el-button>
            </el-button-group>
          </el-header>
          <el-main v-if="currrenIndex == 1" class="info">
            <div class="left">
              <div class="nav">
                <template v-for="(item, index) in leftList">
                  <div :key="index" :class="item.value == leftIndex ? 'left-active' : ''" @click="changeleft(item.value)">{{ item.text }}</div>
                </template>
              </div>
              <!-- 组织 -->
              <div v-if="leftIndex == 'organization'" v-loading="leftloading" class="left-info" style="padding: 20px;" element-loading-text="组织数据同步中...">
                <el-tree :key="timer" class="tree-line"  :indent="0"  :expand-on-click-node="false" node-key="id" default-expand-all :data="treearr" :props="defaultProps">
                  <span slot-scope="{ node, data }" class="custom-tree-node">
                    <el-radio-group v-model="treearrId">
                      <el-radio :label="data.id" @change="setTree(data)">
                        <div v-if="data.imgIcon" style="display: inline-block;width:17px;height:26px;padding:8px 3px 0 0">
                          <img style="width:14px;height:14px" :src="data.imgIcon" />
                        </div>
                        <span>{{ node.label }}</span>
                      </el-radio>
                    </el-radio-group>
                  </span>
                </el-tree>
              </div>
              <div v-show="leftIndex == 'station'" style="padding:10px 20px 0px">
                <el-input v-model="jobsinput" placeholder="请输入岗位关键字搜索"></el-input>
              </div>
              <!-- 岗位 -->
              <div v-show="leftIndex == 'station'" v-loading="leftloading" class="left-info" element-loading-text="岗位数据同步中...">
                <el-radio-group v-model="jobsIndex">
                  <div v-for="(item, index) in josarr" :key="index" class="user">
                    <el-radio :label="item.id" @change="choosejob(item,index)">
                      <i class="icon iconfont icontree_icon_jobs"></i>
                      {{item.name}}
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>
              <!-- 用户 -->
              <div v-show="leftIndex == 'user'" style="padding:10px 20px 0px">
                <el-input v-model="userinput" placeholder="请输入用户关键字搜索"></el-input>
              </div>
              <div v-show="leftIndex == 'user'" v-loading="leftloading" class="left-info" element-loading-text="用户数据同步中...">
                <el-radio-group v-model="userIndex">
                  <div v-for="(item, index) in userarr" :key="item.id" class="user">
                    <el-radio :label="item.id" @change="chooseuser(item,index)">
                      <i class="icon iconfont icontree_icon_team"></i>
                      {{item.name}}
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>
              <!-- 角色 -->
              <div v-show="leftIndex == 'role'" style="padding:10px 20px 0px">
                <el-input v-model="roleinput" placeholder="请输入角色关键字搜索"></el-input>
              </div>
              <div v-show="leftIndex == 'role'" v-loading="leftloading" class="left-info" element-loading-text="角色数据同步中...">
                <el-radio-group v-model="roleIndex">
                  <div v-for="(item, index) in rolearr" :key="index" class="user">
                    <el-radio :label="item.id" @change="chooserole(item,index)">
                      <i class="icon iconfont icontree_icon_team"></i>
                      {{item.name}}
                    </el-radio>
                  </div>
                </el-radio-group>
              </div>
            </div>
            <div class="center"></div>
            <div class="right">
              <div class="nav">
                <template v-for="(item, index) in rightList">
                  <div :key="index" :class="item.value == rightIndex ? 'right-active' : ''" @click="changetight(item.value)">{{ item.text }}</div>
                </template>
              </div>
              <!-- 功能 -->
              <div v-if="rightIndex !== 5" v-loading="rightloading" class="right-info" element-loading-text="权限同步中...">
                <el-tree ref="functiontree" :key="rightIndex" class="tree-line"  :indent="0"  node-key="nodeId" :expand-on-click-node="false" show-checkbox :data="functiontreeData" :props="defaultProps" @check="getButton">
                  <span slot-scope="{ node }" class="custom-tree-node">
                    <span>{{ node.label }}</span>
                  </span>
                </el-tree>
              </div>
              <!-- 数据 -->
              <div v-if="rightIndex == 5" v-loading="rightloading" class="right-info" element-loading-text="数据同步中...">
                <div class="right-info-left">
                  <el-tree ref="newtree" :key="tree1" node-key="id" class="tree-line"  :indent="0"  default-expand-all :data="newtree" :props="defaultProps" :expand-on-click-node="false">
                    <span slot-scope="{ node ,data}" class="custom-tree-node">
                      <span v-if="data.hierarchytyp">
                        <i :class="data.icon"></i>
                        <span>{{ node.label }}</span>
                      </span>
                      <el-radio-group v-else v-model="radio" @change="gettable(data)">
                        <el-radio :label="data">
                          <i :class="data.icon"></i>
                          <span :style="show.indexOf(data.id)!==-1?'color:'+bg_color:''">{{ node.label }}</span>
                        </el-radio>
                      </el-radio-group>
                    </span>
                  </el-tree>
                </div>
                <div class="right-info-right">
                  <div style="width: 100%;border:1px solid #e1e5ed;">
                    <el-input v-model="searchValue" :debounce='1000' style="padding:10px;" placeholder="可输入字符对数据进行全局搜索" />
                    <el-table ref="multipleTable" :data="tableData" style="width:100%" @select="multipleTableFun" @select-all="multipleTableFun">
                      <el-table-column v-if="tableData.length!==0" type="selection" width="55">
                      </el-table-column>
                      <template v-for="(item,index ) in tableTitle">
                        <el-table-column :key="index" :prop="item.columnName" :label="item.columnComment" width="auto"></el-table-column>
                      </template>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <!-- 快捷配置 -->
          <el-main v-if="currrenIndex == 2" class="info">
            <div class="right">
              <div class="nav">
                <template v-for="(item, index) in rightList">
                  <div :key="index" :class="item.value == rightIndex ? 'right-active' : ''" @click="changetight(item.value)">{{ item.text }}</div>
                </template>
              </div>
              <!-- 功能 -->
              <div v-if="rightIndex !== 5" v-loading="rightloading" class="right-info" element-loading-text="权限同步中...">
                <el-tree :key="rightIndex" :default-expand-all="rightIndex == 1?false:true" node-key="id" :data="functiontreeData" class="tree-line"  :indent="0"  :expand-on-click-node="false" :props="defaultProps">
                  <span slot-scope="{ node, data}" class="custom-tree-node">
                    <el-radio-group v-model="foreignId" @change="changefunction">
                      <el-radio :label="data">
                        <span>{{ node.label }}</span>
                      </el-radio>
                    </el-radio-group>
                  </span>
                </el-tree>
              </div>
              <!-- 数据 -->
              <div v-if="rightIndex == 5" v-loading="rightloading" class="right-info" element-loading-text="数据同步中...">
                <div class="right-info-left">
                  <el-tree ref="newtree" node-key="id" default-expand-all :data="newtree" :props="defaultProps" class="tree-line"  :indent="0"  :expand-on-click-node="false">
                    <span slot-scope="{ node,data }" class="custom-tree-node">
                      <span v-if="data.hierarchytyp">
                        <i :class="data.icon"></i>
                        <span>{{ node.label }}</span>
                      </span>
                      <el-radio-group v-else v-model="radio" @change="gettable1(data)">
                        <el-radio :label="data">
                          <i :class="data.icon"></i>
                          <span>{{ node.label }}</span>
                        </el-radio>
                      </el-radio-group>
                    </span>
                  </el-tree>
                </div>
                <div class="right-info-right">
                  <div style="width: 417px;border:1px solid #e1e5ed;">
                    <el-table ref="tableData" :data="tableData" style="width:100%" height="100%">
                      <el-table-column v-if="tableData.length!==0" width="55">
                        <template slot-scope="scope">
                          <el-radio v-model="radio1" :label="scope.row.ID" @change="getshuju1(scope.row.ID)">{{''}}</el-radio>
                        </template>
                      </el-table-column>
                      <template v-for="(item,index ) in tableTitle">
                        <el-table-column :key="index" :prop="item.columnName" :label="item.columnComment" width="auto"></el-table-column>
                      </template>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
            <div class="center"></div>
            <div class="left">
              <div class="nav">
                <template v-for="(item, index) in leftList">
                  <div :key="index" :class="item.value == leftIndex ? 'left-active' : ''" @click="changeleft(item.value)">{{ item.text }}</div>
                </template>
              </div>
              <!-- 组织 -->
              <div v-if="leftIndex == 'organization'" v-loading="leftloading" class="left-info" element-loading-text="组织数据同步中...">
                <el-tree ref="tree" node-key="id" :expand-on-click-node="false" show-checkbox :data="treearr" class="tree-line" :indent="0"  :props="defaultProps" @check="submit1">
                  <span slot-scope="{ node }" class="custom-tree-node">
                    <span>{{ node.label }}</span>
                  </span>
                </el-tree>
              </div>
              <!-- 岗位 -->
              <div v-show="leftIndex == 'station'" style="padding:10px 20px 0px">
                <el-input v-model="jobsinput" placeholder="请输入岗位关键字搜索"></el-input>
              </div>
              <div v-show="leftIndex == 'station'" v-loading="leftloading" class="left-info" element-loading-text="岗位同步中...">
                <el-checkbox-group v-model="jobIds">
                  <div v-for="(item, index) in josarr" :key="index" class="user">
                    <el-checkbox :label="item.id" @change="submit1(jobIds)">
                      <span>
                        <i class="icon iconfont icontree_icon_team"></i>
                        {{ item.name }}
                      </span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
              <!-- 用户 -->
              <div v-show="leftIndex == 'user'" style="padding:10px 20px 0px">
                <el-input v-model="userinput" placeholder="请输入用户关键字搜索"></el-input>
              </div>
              <div v-show="leftIndex == 'user'" v-loading="leftloading" class="left-info" element-loading-text="用户数据同步中...">
                <el-checkbox-group v-model="userIds">
                  <div v-for="(item, index) in userarr" :key="index" class="user">
                    <el-checkbox :label="item.id" @change="submit1(userIds)">
                      <span>
                        <i class="icon iconfont icontree_icon_team"></i>
                        {{ item.name }}
                      </span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
              <!-- 角色 -->
              <div v-show="leftIndex == 'role'" style="padding:10px 20px 0px">
                <el-input v-model="roleinput" placeholder="请输入角色关键字搜索"></el-input>
              </div>
              <div v-show="leftIndex == 'role'" v-loading="leftloading" class="left-info" element-loading-text="角色数据同步中...">
                <el-checkbox-group v-model="roleIds">
                  <div v-for="(item, index) in rolearr" :key="index" class="user">
                    <el-checkbox :label="item.id" @change="submit1(roleIds)">
                      <span>
                        <i class="icon iconfont icontree_icon_team"></i>
                        {{ item.name }}
                      </span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script src="./permissions.js"></script>
<style lang="scss" src="./permissions.scss" scoped></style>
<style>
.active {
  color: var(--bg_color);
}
.is-current > .el-tree-node__content {
  color: var(--bg_color);
}
</style>
